<template>

	<view class="ai_layer">
		
		<scroll-view :style="scrollHeight<50?'':'height:'+scrollHeight+'px;'"  :scroll-y="true" scroll-speed="100"
			     :scroll-into-view="scrollIntoViewId" :scroll-with-animation="true" @scroll="onScroll()" > <!--  -->

    
			<view v-for="(item,index) in askList" class="ai_content" :key="index" >

				<view :class="item.type==0?'myright':'resitem'" v-if="item.ask=='AI繁忙，请点击重试'"
					@click="getAiRetryAsk(item.question,index)">
					{{item.ask}}
				</view>

				<view :class="item.type==0?'myright':'resitemask'" v-else  @longpress="onCopy(item.ask)"  @click="doubleClicked(item,index)">

                    <!-- 纯文本输出部分 -->
					<view>
					   <AiText  :defaultAsk="item.ask" :posId="'ask_'+index"  @scrollTopTo="scrollTopTo" :isStop="isStop"></AiText>
					   <view :id="'ask_'+index"></view>
                    </view>
					
					
					<!-- 底部图标部分 -->
					<view v-if="item.player>0" class="ico_tools">
								<u-icon v-if="item.player==1" name="volume-fill" @click="stopPlay(item,index)" color="#1E9FF2"
									size="35" label="关闭语音 " margin-left="6" style="margin-left:20rpx;"></u-icon>
								<u-icon v-else name="volume-off-fill" @click="stopPlay(item,index)" color="#1E9FF2" size="35"
									label="开启语音 " margin-left="6" style="margin-left:20rpx;"></u-icon>
								<u-icon name="file-text-fill" color="#1E9FF2" size="35" @click="onCopy(item.ask)" label="复制内容"
									margin-left="6" style="margin-left:20rpx;"></u-icon>
								<u-icon name="reload" color="#1E9FF2" size="35" @click="getAiRetryAsk(item.question,index)"  v-if="item.question.length>0"
									label="重新回答 " margin-left="6" style="margin-left:20rpx;"></u-icon>
					</view>
					
					<view v-else-if="item.type==1" class="ico_tools">
								<u-icon name="reload" color="#1E9FF2" size="35" @click="getAiRetryAsk(item.question,index)" v-if="item.question.length>0"
									label="重新回答 " margin-left="6" style="margin-left:20rpx;"></u-icon>
					</view>
				

				</view>

				<!-- AI建议部分 -->
				<view class="flowItem" v-if="item.flow">
					<view class="flowItemText" v-for="(flowItem,k) in item.flow" @click="flowAsk(flowItem)"  :key="k">
						{{flowItem}}
					</view>
				</view>

			</view>



			<view  class="resitem" v-if="aiReply!='AI繁忙，请点击重试'">
				<u-icon name="https://lilishop.oss-cn-beijing.aliyuncs.com/aivoice.png" color="#45ab32" size="60"
					@click="showMic()"></u-icon>
				<u-input type="text" confirm-type="send" @confirm="ask()"
					style="width: 80%;background:#f9f9f9;margin:0 10rpx;padding: 0 10rpx;" v-model="newAsk"
					:placeholder="placeHolder" :clearable="false" />
				<u-icon name="https://lilishop.oss-cn-beijing.aliyuncs.com/aiok.png" color="#45ab32" size="60"
					@click="ask()"></u-icon>
			</view>
			
		

			<view class="resitemMic" v-show="showVoice">

				<u-icon style="top:5px;right:5px;position: absolute;color:#ffffff;" name="close-circle" size="60"
					@click="closeMic()"></u-icon>

				<view class="ai-1" @tap="closeMic()">
					<view class="warm" v-if="voiceTips=='现在请开始说话'">{{voiceTips}}</view>
					<view class="green" v-else>{{voiceTips}}</view>
				</view>



				<view :class="voiceTips.indexOf('识别中')<0?'ai-2':'ai-2-h'">
					<canvas canvas-id="canvas" class="canvas">
						<view class="recording-button" @touchstart="start" @touchmove="move" @touchend="end">
							<u-icon class="mic" name="mic" :color="isSpeaking?'#45ab32':'#79d569'" size="80"></u-icon>
						</view>
					</canvas>
				</view>

				<view :class="voiceTips.indexOf('识别中')>=0?'ai-2':'ai-2-h'">
					<view class="canvas">
						<view class="recording-button">
							<u-icon class="mic" name="mic-off" color="#cccccc" size="80"></u-icon>
						</view>
					</view>
				</view>

			</view>

			<!-- 隐私弹窗 -->
			<privacyPopup></privacyPopup>

		</scroll-view>
	</view>

</template>

<script>
	// #ifdef MP-WEIXIN
	let plugin = requirePlugin("WechatSI");
	let voicManager = plugin.getRecordRecognitionManager();
	// #endif

	import storage from "@/utils/storage.js"

	import {
		chsAiService
	} from "@/api/common.js";

	import {
		forEach
	} from "../../lib/request/utils";
	import privacyPopup from "@/components/privacy-popup/privacy-popup.vue";
	import {
		h5Copy
	} from "@/js_sdk/h5-copy/h5-copy.js";

	import AiText from "@/components/ai/ai-text.vue";
    
	export default {
		options: {
			styleIsolation: 'shared'
		},
		components: {
			privacyPopup,
			AiText
		},
		props: ["defaultAsk", "isShow", "apiType"], //1使用ai智能体
		data() {
			return {
				voiceTips: "长按住下面麦克风说话",
				placeHolder: "输入文字或语音获得AI支持",
				showVoice: false,
				aiReply: "结果生成中...",
				askList: [],
				newAsk: "",
				voiceArr: [],
				strArr: [],
				voiceId: 0,//分段合成的当前id
				lastClickTime: 0,
				isSpeaking: false,

				max: 10000, // 录音最大时长，单位毫秒
				frame: 50, // 执行绘画的频率，单位毫秒
				longTag: 0, // 判定长按和点击的标识
				maxTiming: 0, // 最长录音时间的定时器
				draw: undefined,
				currentId: 0,
				flowList: [],

				
				scrollHeight:80,
				scrollContentHeight:80,
				scrollIntoViewId:"",
				
				isStop:false//true停止输出
		
	
			}
		},

		watch: {
			defaultAsk: {
				immediate: true,
				handler(newValue, oldValue) {
					/* console.log("defaultAsk", this.defaultAsk) */
					this.getAiAsk(this.defaultAsk, 0)
				}
			},

			isShow: {
				immediate: true,
				handler(newValue, oldValue) {
					console.log("isShow", this.isShow)
					if (!this.isShow) {
						console.log("组件隐藏停止播放")
						this.destroyVoice();
					}
				}
			},

		},

		mounted() {
			
			if (getApp().globalData.$voicePlayer != null && getApp().globalData.$voicePlayer.destroy()) {
				console.log("销毁$voicePlayer对象")
				getApp().globalData.$voicePlayer.destroy();
			}
			console.log("创建$voicePlayer对象")
			getApp().globalData.$voicePlayer = uni.createInnerAudioContext();
			getApp().globalData.$voicePlayer.obeyMuteSwitch = false;
			getApp().globalData.$voicePlayer.useWebAudioImplement=true;
			getApp().globalData.$voicePlayer.volume = 1;

			getApp().globalData.$voicePlayer.onEnded(() => {
				console.log("播放结束=", this.voiceId)
				this.voiceId = this.voiceId + 1
				this.voiceTTS(this.voiceId, this.strArr)
			});

			getApp().globalData.$voicePlayer.onPause(() => {
				console.log('暂停播放', this.voiceId)
			})

			getApp().globalData.$voicePlayer.onPlay(() => {
				console.log('开始播放', this.voiceId)
			})

			getApp().globalData.$voicePlayer.onStop(() => {
				console.log('播放停止', this.voiceId)
			})

			getApp().globalData.$voicePlayer.onError((res) => {
				
				console.log("播放错误=", res.errMsg)
				/* this.voiceId = this.voiceId + 1
				this.voiceTTS(this.voiceId, this.strArr) */
				
			})

		},


		beforeDestroy() {
			console.log("组件退出停止播放")
			this.destroyVoice()
			getApp().globalData.$voicePlayer.destroy();
		},

		methods: {
			
			onScroll(e){
				console.log("滚动位置置空")
				this.scrollIntoViewId = "";
			},
	
			scrollTopTo(posId){
			   if(this.scrollHeight===80){
				   this.getAiLayerHeight()
			   }
			   if(this.scrollContentHeight<=this.scrollHeight){
				    this.getAiContentHeight();
			   }else{
				   if( this.scrollIntoViewId==""){
					   this.scrollIntoViewId = posId;
					   console.log("滚动到==",posId)
				   }else{
					   this.scrollIntoViewId=""
				   }
			   }
			
			},
			
			
			getAiContentHeight(){
			  let that=this
				this.createSelectorQuery().selectAll(".ai_content").boundingClientRect(function(rects) {
					let totalHeight = 0;
					  rects.forEach(rect => {
					    totalHeight += rect.height;
					  });
					  console.log('总高度:', totalHeight); 
				 	that.scrollContentHeight=totalHeight;
				}).exec();
				
			},
			
		
			getAiLayerHeight(){
			  let that=this
				this.createSelectorQuery().select(".ai_layer").boundingClientRect(function(rect) {
					console.log(rect,"ai_layer高度");
					that.scrollHeight=(rect.height-60)
					console.log(that.scrollHeight,"==ai_layer高度");
				}).exec();
			
			},
			
		
			ask() {
				let askString = this.newAsk
				this.getAiAsk(askString, 1)
				this.newAsk = ""
			},

			flowAsk(flowUp) {
				this.getAiAsk(flowUp, 1)
			},

			destroyVoice() {

				if (getApp().globalData.$voicePlayer) {
					this.onlyStop(this.askList[this.currentId], this.currentId)
					getApp().globalData.$voicePlayer.stop();
				}
			},


			//奇偶双开关
			stopPlay(obj, index) {

				if (obj == undefined) {
					return
				}
				if (obj.player == 0) {
					return
				}
				
			  
				uni.showToast({
					title: obj.player==1?"语音关闭":"语音开启",
				});
				

				if (obj.player == 1) {
					obj.player = 2
					if (this.currentId == index) {
						/* console.log("停止播放当前id", this.currentId) */
						getApp().globalData.$voicePlayer.pause();
					}
				} else {
					obj.player = 1
					if (this.currentId == index) {
						/* console.log("重新播放当前id", this.currentId) */
						getApp().globalData.$voicePlayer.play();
					} else {
						this.playList(obj.ask);
						this.currentId = index
						this.updateCurrentId()
						/* console.log("播放新的当前id", this.currentId) */
					}
				}

				this.$set(this.askList, index, obj);
			},

			//只关不开
			onlyStop(obj, index) {
				if (obj == undefined) {
					return
				}

				if (obj.player == 1) {
					obj.player = 2
					if (this.currentId == index) {
						console.log("停止前播放器状态检测", getApp().globalData.$voicePlayer) 
						getApp().globalData.$voicePlayer.pause();
						getApp().globalData.$voicePlayer.stop();
					}
				}
				this.$set(this.askList, index, obj);
			},

			playList(askObj) {
				
				// #ifdef MP-WEIXIN
				let str="";
				if(typeof askObj == "string" ){
					str=askObj;
				}else{
					if(askObj.bl){
						if(askObj.bl.nodeRemark){
							str=askObj.bl.nodeRemark;
						}
					}
				}
				
				if(str.length<2){
					return
				}
				
				str = str.replaceAll(/<[^>]*>/g, '');
				str = str.replaceAll(/\n/g, '<br>')
				str = str.replaceAll('<br><br>', '<br>');
				/* console.log(str, "语音分段数据") */
				this.strArr = this.cutString(str);
				this.voiceArr = [];
				this.voiceId = 0;
				this.voiceTTS(0, this.strArr);
				// #endif	

			},


			// 语音合成
			voiceTTS(i, strArr) {

				console.log("处理音频=", i)
				
				if (strArr[i] == undefined) {
					return
				}

				//处理特殊字符
				let strToVoice=this.strToVoice(strArr[i]);
				
				if (strToVoice.length < 2) {
					console.log("文本太短 忽略音频合成")
					this.voiceTTS(i + 1, this.strArr)
					return
				}
				
				strToVoice=strToVoice.length > 400 ? strToVoice.slice(0, 400) : strToVoice;
				
				console.log("即将合成语音的文字", strToVoice)
               
				let _that = this;
				
				plugin.textToSpeech({
					lang: "zh_CN",
					tts: true,
					content: strToVoice,
					success: function(res) {
						console.log("合成音频", i)
						
						
						wx.downloadFile({
						  url: res.filename, //仅为示例，并非真实的资源
						  success (result) {
						    // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
						    if (result.statusCode === 200) {
						      console.log("合成文件下载=",res.filename,"=>",result.tempFilePath)
							  getApp().globalData.$voicePlayer.src = result.tempFilePath;
							  getApp().globalData.$voicePlayer.play(); //执行播放
						    }else{
								console.log("下载失败不播放缓存",result)
								getApp().globalData.$voicePlayer.src = res.filename;
								getApp().globalData.$voicePlayer.play(); //执行播放
							}
						  },
						  fail:function(result){
						    console.log("下载失败不播放缓存",result)
							getApp().globalData.$voicePlayer.src = res.filename;
							getApp().globalData.$voicePlayer.play(); //执行播放
						  }
						})
						
					
					},
					fail: function(res) {
						this.voiceTTS(i + 1, this.strArr)
						console.log("合成失败", res)
					}
				})
			},


			cutString(str) {
				let resArr = str.split("<br>")
				console.log("字符串分段=", resArr)
				return resArr
			},
			
			strToVoice(str) {
		      return str.replaceAll("&quot;","");	
			},


			getAiAsk(askString, type) {

				if (askString.length > 1) {

					let obj = {
						ask: askString,
						type: 0,
						question: "",
						player: 0
					}
					if (type !== 0) {
						this.updateAskList(obj, -1)
					}

					uni.showLoading({
						title: "AI处理中"
					});

					chsAiService({
						msgBody: askString,
						apiType: this.apiType
					}).then(res => {

						let obj = {
							ask: "AI繁忙，请点击重试",
							type: 1,
							question: askString,
							player: 0
						}

						uni.hideLoading();
						
						if (res.data) {
							if (res.data.code == 200) {
							
								let returnObj = this.askOp(res,askString,-1)
							
								obj.ask = returnObj.ask;
								obj.player = returnObj.player;
							    obj.flow = this.flowList;
							
							}
						}

						this.updateAskList(obj, -1)

					})
				}

			},


			getAiRetryAsk(askString, index) {
				console.log(askString,"==重问")

				uni.showLoading({
					title: "AI处理中"
				});

				chsAiService({
					msgBody: askString,
					apiType: this.apiType
				}).then(res => {
					let obj = {
						ask: "AI繁忙，请点击重试",
						type: 1,
						question: askString,
						player: 0
					}

					uni.hideLoading();
					
                   if (res.data) {
					 if (res.data.code == 200) {

						let returnObj = this.askOp(res,askString,index)
						obj = this.askList[index]
						
						obj.ask = returnObj.ask;
						obj.player = returnObj.player;
						obj.flow = this.flowList;
					
						this.updateAskList(obj, index)
					 }
                   }
				})

			},

			//回复结果格式处理
			askOp(res,askString,index) {
				
				let returnObj = {
			 	    ask: "",
					player: 1,
					question: askString,
				}

				let msgRes = JSON.parse(res.data.result).result
				returnObj.ask = msgRes
				
				/* console.log("msgres===", msgRes) */
				if (msgRes.indexOf("<FlowUp>") >= 0 && msgRes.indexOf("<M>") > 0) {
					let flowStr = this.getStringBetweenChars(msgRes, "<FlowUp>", "</FlowUp>");
					msgRes = msgRes.replace(flowStr, "")
					this.flowList = flowStr.split("<M>");
					returnObj.ask = msgRes 
					returnObj.player = 1
				}

				return returnObj;

			},


			updateAskList(obj, index) {
				
				if(!obj){
					return;
				}
				
				if(obj.ask==null){
					return;
				}
				
				console.log(obj.question,"=回复信息=",obj.ask,"=====",index)
				
				this.isStop=false;//有新的回复开启流式输出
				
				if(typeof obj.ask == "string" ){
					let str = obj.ask.replaceAll(/<[^>]*>/g, '');
					if(str.length<1){
						if(index==-1){
							obj.ask="抱歉，没有您要的信息！"
						}else{
							return
						}
					}
				}
				
			
				let cid = 0
				if (index == -1) {
					this.askList.push(obj)
					cid = this.askList.length - 1
				} else {
					this.$set(this.askList, index, obj);
					cid = index
				}
				
	
				if (obj.player == 1) {
					this.onlyStop(this.askList[this.currentId], this.currentId)
					this.currentId = cid
					this.updateCurrentId()
					this.playList(obj.ask)
					return
				}
				
			},


			updateCurrentId() {
				this.askList.forEach((item) => {
					if (item.player > 0) {
						item.player = 2
					}
				})
				this.askList[this.currentId].player = 1
			},

			doubleClicked(item, index) {
				console.log("双击事件")
				const currentTime = new Date().getTime();
				const timeDiff = currentTime - this.lastClickTime;
				if (timeDiff < 300) { // 假设双击间隔小于300毫秒
				    this.isStop=!this.isStop
					this.stopPlay(item, index)
				} else {
					this.lastClickTime = currentTime;
				}
			},

			onCopy(text) { //复制回复内容
				text = text.replaceAll(/<[^>]*>/g, '');
				// #ifdef H5
				if (text === null || text === undefined) {
					text = "";
				} else text = text + "";
				const result = h5Copy(text);
				if (result === false) {
					uni.showToast({
						title: "不支持",
					});
				} else {
					uni.showToast({
						title: "复制成功",
						icon: "none",
					});
				}
				// #endif

				// #ifndef H5
				uni.setClipboardData({
					data: text,
					success: function() {
						uni.showToast({
							title: "复制成功!",
							duration: 2000,
							icon: "none",
						});
					},
				});
				// #endif

			},

			//语音部分===
			//===============

			initVoicManager() {

				/* voicManager.onRecognize = (res) => {
				  	     console.log(res,"=============结果1")
				} */
				// 识别结束事件
				voicManager.onStop = (res) => {
					console.log(res, "=============onStop")
					let text = res.result
					if (text == '') { // 用户没有说话，可以做一下提示处理...
						this.voiceTips = "录音失败,请重新按住说话"
						return
					} else {
						this.newAsk = text;
						this.closeMic()
						this.ask();
					}

				}

				voicManager.onError = (res) => {
					this.voiceTips = "录音失败 请检查后重试"
					console.log(res, "=============onError")
					this.end();
					return
				}

				voicManager.onStart = (res) => {
					console.log(res, "=============onStart")
					if (this.longTag > 0) { // timeout不是false证明没有触发recording或者touchmove事件
						this.voiceTips = "现在请开始说话"
						console.log(res, "=============开始记录")
						this.recording()
					}
					return
				}

			},


			btn() {
				console.log('点击后标志', this.longTag);
				console.log('长按结束')
			},

			start() {

				if (this.voiceTips.indexOf("识别中") >= 0) {
					console.log("start 事件 阻止")
					this.voiceTips = "语音识别中 请稍候"
					return
				}

				this.longTag = 0;
				this.initVoicManager();
				voicManager.start({
					lang: 'zh_CN',
				})

				console.log('点击前标志', this.longTag);
				this.longTag = setTimeout(this.btn, 500); // 定义超过500ms即为长按，可自行修改 */
				this.isSpeaking = true;
				
			},


			move() {
				console.log("move 事件")
				if (this.voiceTips.indexOf("识别中") >= 0) {
					console.log("move 事件 阻止")
					this.voiceTips = "语音识别中 请稍候"
					return
				}

				clearTimeout(this.longTag);
				clearTimeout(this.maxTiming);
				clearInterval(this.draw);
				this.isSpeaking = false;
			},

			end() {
				console.log("end 事件")
				if (this.voiceTips.indexOf("识别中") >= 0) {
					console.log("end 事件 阻止")
					this.voiceTips = "语音识别中 请稍候"
					return
				}

				clearTimeout(this.longTag);
				clearTimeout(this.maxTiming);
				clearInterval(this.draw);
				this.isSpeaking = false;
				if (this.longTag == 0) { // timeout不是false证明没有触发recording或者touchmove事件
					console.log('仅点击事件');
					return
				}
				this.longTag = 0;
				// 语音转换
				this.send();
			},

			recording() {

				let self = this;
				// 开始录音
				console.log('录音开始');

				// 最大录音时间10秒
				this.maxTiming = setTimeout(function() {
					clearInterval(this.draw);
					console.log('时间到');
					// 语音转换
					self.send();
				}, self.max);

				// 录音过程圆圈动画
				let angle = -0.5;
				let context = uni.createCanvasContext('canvas', this);
				this.draw = setInterval(function() {
					console.log('录音计时开始');
					context.beginPath();
					context.setStrokeStyle("#9ce791");
					context.setLineWidth(3);
					context.arc(80, 80, 75, -0.5 * Math.PI, (angle += 2 / (self.max / self.frame)) * Math.PI,
						false);
					context.stroke();
					context.draw();
				}, self.frame);

			},

			send() {
				this.voiceTips = "语音识别中"
				console.log("发送至send");
				this.clearCanvas();
				voicManager.stop();
			},

			timing() {
				let self = this;
			},

			reset() {
				this.seconds = '00';
				this.ms = '00';
			},

			clearCanvas() {
				let context = uni.createCanvasContext('canvas', this);
				context.clearRect(0, 0, 120, 120); // 清除画布上的内容
				context.draw();
			},

			showMic() {
				this.voiceTips = "长按住下面麦克风说话"
				this.showVoice = true
				console.log('显示遮盖');
				this.placeHolder = ""
				this.onlyStop(this.askList[this.currentId], this.currentId)
			},

			closeMic() {
				this.voiceTips = "长按住下面麦克风说话"
				this.showVoice = false
				console.log('关闭遮盖');
				this.placeHolder = "输入文字或语音获得AI支持"
			},



			//排序
			sortByKey(array, type, filterArr) {

				var filterArrStr = filterArr.join(","); // "

				return array.sort(function(a, b) {
					console.log(a.percent, "=11==", a.disease.nodeName, a.disease.id)
					if (filterArrStr.indexOf(a.disease.id) >= 0) {
						filterArrStr = filterArrStr.replaceAll(a.disease.id, "")
						a.percent = a.percent + Math.floor((10 - a.percent) / 2);
						console.log(a.percent, "=22==", a.disease.nodeName, a.disease.id)
					}

					let x = a.percent;
					let y = b.percent;
					if (type == "desc") {
						return ((x > y) ? -1 : ((x < y) ? 1 : 0));
					} else {
						return ((x < y) ? -1 : ((x > y) ? 1 : 0));
					}

				})
			},


			getStringBetweenChars(str, startChar, endChar) {
				var startIndex = str.indexOf(startChar);
				var endIndex = str.indexOf(endChar, startIndex + 1);

				if (startIndex === -1 || endIndex === -1) {
					return ""; // 如果未找到指定字符，则返回空字符串
				}
				return str.substring(startIndex + startChar.length, endIndex);
			},

			
		}

	}
</script>

<style lang="scss" scoped>
		.resitemMic {
			/* width: 100%;
			float: left;
			height: 300rpx;
			background-color: #cccccc;
			color: #f9f9f9;
			padding-bottom:160rpx;
			
			 */
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.65);
			justify-content: center;
			text-align: center;
			z-index: 9999;
	
			/* 半透明遮罩 */
	
			.ai-1 {
				width: 100%;
				display: flex;
				justify-content: center;
				text-align: center;
				color: #ffffff;
				font-size: $font-32rpx;
				position: fixed;
				top: 40%;
	
				.green {
					background-color: #40A631;
					padding: 20rpx;
					border-radius: 20rpx;
				}
	
				.warm {
					background-color: #f5882b;
					padding: 20rpx;
					border-radius: 20rpx;
				}
			}
	
			.ai-2 {
				width: 100%;
				display: flex;
				justify-content: center;
				text-align: center;
				bottom: 240rpx;
				position: fixed;
	
				.canvas {
					width: 160px;
					height: 160px;
					display: block;
					position: relative;
				}
			}
	
			.ai-2-h {
				display: none;
			}
		}
	
	
		.myright {
			text-align: right;
	        font-size: $font-40rpx;
			color: white;
			background-color: #40A631;
			float: right;
			border-radius: 5px;
			padding: 6px;
			view{
				overflow-x: auto;
			}
		}
		
		.resitemask {
			width: 100%;
			float: left;
			padding: 10px;
			margin: 5px 0;
			background-color: white;
			font-size:$font-40rpx;
		}
		
	
		.content {
			width: 100%;
			float: left;
			padding: 20rpx;
		}
	
		.title {
			margin-bottom: 10rpx;
			font-size: $font-32rpx;
			font-weight: bold;
			margin-top: 10rpx;
			background-color: white;
			border-radius: 8rpx;
			width: 100%;
			float: left;
			padding: 10rpx;
	
		}
	
		.restart {
	
			font-size: $font-32rpx;
			font-weight: bold;
			background-color: #40A631;
			color: white;
			border-radius: 8rpx;
			width: 100%;
			float: left;
			padding: 20rpx;
			text-align: center;
			margin: 20rpx 0;
		}
	
	
	
	
		
		.resitem {
			width: 100%;
			float: left;
			padding: 10px;
			display: flex;
			margin: 5px 0;
			background-color: white;
		}
	
		.flowItem {
			padding-left: 10px;
			background: #ffffff;
			float: left;
			width: 100%;
		}
	
		.flowItemText {
			background: #f9f9f9;
			margin: 5px 0;
			padding: 5px;
			width: fit-content;
			border-radius: 10px;
		}
		
		.ai_layer{
			height:100%; 
			overflow: hidden;
			width: 100%;
			float: left;
			background-color: #f9f9f9;
		}
		
		.ai_content{
			float: left;width: 100%;
		}
		
		.ico_tools{
			text-align: end;
			margin-top: 10rpx;
		}
		
	
		.nav-list {
			margin-top: 20rpx;
			width: 100%;
			float: left;
		}
	
		.recording-button {
			position: absolute;
			box-sizing: border-box;
			display: inline-block;
			width: 80px;
			height: 80px;
			top: 40px;
			left: 40px;
	
			z-index: 100;
	
			border-radius: 8px;
			/* 设置元素边框为1像素宽度，样式为实线，颜色为透明。 */
			border: 5px solid transparent;
			/* 设置元素边框圆角为10像素。 */
			border-radius: 50%;
			/* 设置背景剪裁区域为内边距和边框区域。 */
			background-clip: padding-box, border-box;
			/* 设置背景绘制区域为内边距和边框区域。 */
			background-origin: padding-box, border-box;
			background-image:
				linear-gradient(to right, #fff, #fff),
				linear-gradient(155deg, #eefbec, #c4edbd);
			box-shadow: 0px 0px 5px 0px #eefbec;
	
			.mic {
				top: 16px;
				left: 16px;
				position: absolute;
			}
		}
	
		/deep/ .u-input__input {
			font-size: $font-36rpx !important;
		}
</style>
